import React, { PureComponent } from "react";
import { connect } from "react-redux";
import styled from "styled-components";
import { Button, Layout, Input, Radio } from "antd";
import IconFont from "../../components/iconfont";

import { taskStoreActions } from "../../actions";
import { taskStoreSelectors } from "../../selectors";

const { Header } = Layout;
const { Search } = Input;

const TopBar = styled.div`
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
  justify-content: space-between;
`;
const TopBarLeft = styled.div`
  display: flex;
  -ms-flex-positive: 1;
  flex-grow: 1;
  text-align: center;

  .name {
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 20px;
    width: 160px;
    min-width: 160px;
    margin-left: 24px;
    margin-right: 16px;
    flex-shrink: 0;
    flex-grow: 0;
  }
  .search {
    flex-grow: 2;
    flex-shrink: 1;
    padding-left: 10px;
    min-width: 150px;
    max-width: 400px;
  }
  .status {
    flex-grow: 0;
    flex-shrink: 2;
    padding-left: 20px;
  }
`;
const TopBarRight = styled.div`
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  padding-right: 24px;
  color: #001529;
`;

@connect(state => {
  const listTasksState = taskStoreSelectors.listTasks(state) || {};
  return {
    query: listTasksState.request.query,
  };
})
export default class TaskHeader extends PureComponent {
  onStatusChange = e => {
    const { query } = this.props;
    this.props.dispatch(
      taskStoreActions.listTasks.request({
        query: {
          label: query.label,
          status: e.target.value,
        },
      })
    );
  };
  render() {
    return (
      <Header
        style={{ background: "white", paddingLeft: "0px", paddingRight: "0px" }}
      >
        <TopBar>
          <TopBarLeft>
            <div className="name">
              <IconFont
                style={{ fontSize: "22px", marginRight: "20px" }}
                type="icon-bars"
              />
              <span>任务大厅</span>
            </div>
            <div className="search">
              <Search
                placeholder="搜索"
                enterButton
                style={{ verticalAlign: "middle" }}
              />
            </div>
            <div className="status">
              <Radio.Group defaultValue="todo" onChange={this.onStatusChange}>
                {this.props.query && this.props.query.label === "my" ? null : (
                  <Radio.Button value="todo">Todo</Radio.Button>
                )}
                <Radio.Button value="doing">Doing</Radio.Button>
                <Radio.Button value="done">Done</Radio.Button>
              </Radio.Group>
            </div>
          </TopBarLeft>
          <TopBarRight>
            <Button type="link" ghost style={{ color: "#001529" }}>
              <IconFont type="icon-bell" />
            </Button>
          </TopBarRight>
        </TopBar>
      </Header>
    );
  }
}
